/**
 * Web Animation API 将 css 中的 Animation 能力脚本化，
 * 使得可以更灵活高效的创建高性能动画效果
 */

// 第一件事就是先创建一个“关键帧对象”，类似于 css 中 @keyframes 块。 
const aliceTumbling = [
  { transform: 'rotate(0) ', opacity: 1 },
  { opacity: 0.1, offset: 0.3 },
  { transform: 'rotate(360deg) ', opacity: 1 }
];

// 准备时间属性
const aliceTiming = {
  duration: 3000, // 一次动画持续时长
  easing: 'ease-in-out', // 缓动函数
  fill: 'both',
  iterations: Infinity // 重复次数（Infinity时无法通过 finish() 方法结束）
};

// 使用 Element.animate() 方法将上面两个配置整合在一起
const aliceAnimation = document.getElementById('alice').animate(
  aliceTumbling,
  aliceTiming
);

// 暂停按钮点击处理
function handlePauseClick() {
  console.log('暂停');
  aliceAnimation.pause();
}

// 播放按钮点击处理
function handlePlayClick() {
  console.log('播放');
  aliceAnimation.play();
}

// 回放按钮点击处理
function handleReverseClick() {
  console.log('回放');
  aliceAnimation.reverse(); // 会停止在第一帧，其本质是对 aliceAnimation.aplybackRate 的操作，这是为 -1 即可反向常速播放
  // aliceAnimation.updatePlaybackRate(指定值)
}

// 结束按钮点击处理
function handleFinishClick() {
  console.log('结束');
  aliceAnimation.finish();
}

// 取消按钮点击处理
function handleCancelClick() {
  console.log('取消');
  aliceAnimation.cancel(); // 删除动画，并移除效果
}

// 增加速率按钮点击处理
function handleAddRateClick() {
  console.log('增加速率');
  aliceAnimation.updatePlaybackRate(aliceAnimation.playbackRate * 1.1);
  console.log('播放速率：%s', aliceAnimation.playbackRate);
}

// 每三秒变化一次播放速率
setInterval(() => {
  console.log('播放速率：%s', aliceAnimation.playbackRate);
  if (aliceAnimation.playbackRate > 0.4) {
    aliceAnimation.updatePlaybackRate(aliceAnimation.playbackRate * 0.9);
  }
}, 3000);

document.getElementById('pause').addEventListener('click', handlePauseClick);
document.getElementById('play').addEventListener('click', handlePlayClick);
document.getElementById('reverse').addEventListener('click', handleReverseClick);
document.getElementById('finish').addEventListener('click', handleFinishClick);
document.getElementById('cancel').addEventListener('click', handleCancelClick);
document.getElementById('addRate').addEventListener('click', handleAddRateClick);